<script lang="ts">
	import { goto } from "$app/navigation";
	import lazy from "$lib/lazy";
	import type { Item } from "$lib/types";
	import list from "$lib/stores/list";
	export let item: Item;
</script>

<article
	class="item"
	on:click={() => {
		const itemType = item.endpoint?.pageType;
		itemType.includes("PLAYLIST") && goto("/playlist/" + item.endpoint.browseId);
		itemType.includes("ALBUM") && goto("/release?id=" + item.endpoint.browseId);
		item.videoId &&
			list.initAutoMixSession({
				videoId: item.videoId,
				playlistId: item.playlistId,
			});
	}}
>
	<div class="img">
		<img
			width={item.thumbnails && item.thumbnails[0].width}
			height={item.thumbnails && item.thumbnails[0].height}
			loading="lazy"
			on:error={(e) => {
				e.currentTarget.onerror = null;
				e.currentTarget.src =
					"";
			}}
			decoding="async"
			use:lazy={{ src: item.thumbnails && item.thumbnails[0].url }}
			src=""
			alt="thumbnail"
		/>
	</div>
	<div class="item-title">{item.title}</div>
	{#if item.subtitle}
		<span class="subtitles secondary">
			{#each item.subtitle as sub}
				{#if !sub?.browseId}
					<span>{sub.text}</span>
				{:else}
					<a
						on:click|stopPropagation|preventDefault={() => {
							goto("/artist/" + sub?.browseId);
						}}
						href={"/artist/" + sub?.browseId}><span>{sub.text}</span></a
					>
				{/if}
			{/each}
		</span>
	{/if}
</article>

<style lang="scss">
	.item {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;

		justify-content: flex-start;

		cursor: pointer;
		border-radius: 0.4rem;
		padding: 0.5rem 0.4rem 0.4rem;
		position: relative;
		width: 100%;
		.img {
			width: 100%;
			margin-bottom: 0.5em;
			img {
				height: auto;
				width: 100%;
			}
		}
	}
	.item-title {
		display: inline;
		padding: 0.3rem 0.1rem;
		font-family: "CommissionerVariable";
		font-weight: 500;
		font-size: 1.1em;
		letter-spacing: -0.02em;
	}
	@media screen and (min-width: 37em) and (max-width: 48em) {
		.item {
			max-width: 13rem;
		}
	}
	@media screen and (min-width: 48em) {
		.item {
			max-width: 14rem;
		}
	}
</style>
